<template>
 <div>
    <!-- 热歌榜图片 -->
    <div class="topPic">
      <img src="@/assets/images/hot_music_bg_2x.jpg" width="100%" />
    </div>
    <!-- 热歌列表 -->
    <MusicList :List="List" > <template #num="obj"  >
       <div class="num" :class="{ 'color-red': obj.index < 3 }">
          {{ obj.index > 8 ? obj.index + 1 : "0" + (obj.index + 1) }}
       </div>
      </template> </MusicList>
 </div>
</template>

<script>
import MusicList from "@/components/MusicList";
export default {
  name: "HotMusic",
    components: { MusicList },
  data() {
    return {
      List: [],
    };
  },
  created() {
    this.playList();
  },
  methods: {
    async playList() {
      let res = await this.$api.getHotSong();
      5;
      this.List = res.data.playlist.tracks;
      // console.log(this.HotSong);
    },
  },
};
</script>

<style lang="less" scoped>
.topPic {
  img {
    height: 2.919rem;
  }
}
.list {
  display: flex;
  .num {
    flex-shrink: 0;
    width: 1.1rem;
    display: flex;
    font-size: 17px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .color-red {
    color: #df3436;
  }
  .list-item {
    border-bottom: 1px solid #eee;
    padding-top: 6px;
    padding-bottom: 6px;
    display: flex;
    flex: 1;
    .left {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
    }
    .subtitle {
      font-size: 17px;
      color:#333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
      max-width: 6.5rem;
      span {
        color: #888;
      }
    }
    .author {
      margin-top: 4px;
      font-size: 12px;
      color: #888;
    }

    .right {
      align-items: center;
    }
  }
}
</style>
